<script lang="ts" setup>
import TopCarousel from '@/components/TopCarousel.vue'
import { onBeforeMount, ref } from 'vue'
import CourseCard from '@/components/CourseCard.vue'
import axios from '@/request/request'
import type { Course, Result } from '@/request/types'

const curriculum = ref<Course[]>()
onBeforeMount(async () => {
  const result = await axios.get<Result<Course[]>>('/api/curriculum/list').catch()
  console.log(result)
  curriculum.value = result.data.data
})
</script>

<template>
  <div class="container mx-auto flex flex-col items-center">
    <TopCarousel />

    <el-card
      body-class="w-full grid grid-cols-[repeat(auto-fit,_minmax(240px,_1fr))] gap-4"
      class="mt-8 w-full"
    >
      <template #header>
        <div class="flex items-center">
          <el-image
            class="w-[50px] mr-4"
            src="https://codelover.club/static/img/headLogo.d458f61f.png"
          />
          <div class="flex gap-4 flex-shrink-0 card-choose-text">
            <span class="cursor-pointer active">推荐</span>
            <span class="cursor-pointer">前端开发</span>
            <span class="cursor-pointer">后端开发</span>
            <span class="cursor-pointer">精品免费</span>
          </div>
        </div>
      </template>

      <CourseCard v-for="item in curriculum" :key="item.currNo" :course="item" />
    </el-card>
  </div>
</template>
<style scoped>
.card-choose-text {
  color: #b0b0b0;

  .active {
    color: #181818;
    position: relative;

    &::after {
      content: '';
      bottom: -5px;
      left: 0;
      position: absolute;
      width: 100%;
      height: 4px;
      background-color: #0069dc;
      border-radius: 4px;
    }
  }
}
</style>
